<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nodeType</title>
</head>
<body>
    <h1>成龙</h1>
    <p>金喜善</p>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
        <div class="xiangjun"><!--向军大叔--></div>
    </div>


    
    <script>
        // console.dir(document.nodeType);
        // console.dir(document.nodeName);
        //HTML
        //下面通过nodeType来获取html元素
        // let html = [...document.childNodes].filter((node) => {
        //     if(node.nodeType == 1){
        //         return node;
        //     }
        // })[0];
        // console.log(html);

        //系统提供了简单的方式来获取HTML元素
        //<!DOCTYPE html> 不是文档节点
        //html开始到html结束之间的节点才是文档节点
        // console.log(document.documentElement);

        //文档信息
        //使用title获取和设置文档标题
        
        //获取文档标题
        // console.log(document.title);

        //设置文档标签
        // document.title = '后盾人-houdurnes.com';

        //获取当前的URL
        // console.log(document.URL);

        //获取域名
        // console.log(document.domain);

        //获取地址来源
        // console.log(document.referrer);

        //body
        //节点属性
        //不同的类型节点拥有不同的属性，下面是节点属性的说明与示例
        //nodeType
        //1元素节点   2：属性节点  3：文本节点  8注释节点  9：documen对象

        //下面是nodeType的示例
        // const node = document.querySelector("#app");
        // console.log(node.nodeType);
        // console.dir(node.firstChild.nodeType);

        // const xj = document.querySelector(".xiangjun");
        // console.log(xj.childNodes[0].nodeType);//注释节点

        //也可以使用对象的原型进行检测
        // let h1 = document.querySelector("h1");
        // let p = document.querySelector("p");
        // console.log(h1 instanceof HTMLHeadingElement);
        // console.log(p instanceof HTMLHeadingElement);
        // console.log(p instanceof Element);

        //下面是递归获取所有的标签
        


    </script>


    <div id="hd">
        <ul>
            <li>
                <h2><strong>后盾人</strong></h2>
            </li>
        </ul>
    </div>
    <script>
        //递归获取所有的元素
        function all(el){
            let items = [];
            //对象数组  将对象数组展开
            [...el.childNodes].map((node) => {
                if(node.nodeType == 1){
                    items.push(node,...all(node));
                }
            })
            return items;
        }

        console.log(all(document.getElementById('hd')))
    </script>
</body>
</html>